<template>
  <div class="register">
    <div class="xlogin">
      <h1>欢迎注册</h1>
      <h4>请输入您的个人信息</h4>
      <div class="input">
        <h3>用户名设置</h3>
        <div>
          <input type="text" placeholder="请输入用户名" v-model="name" :state="username" />
          <span></span>
        </div>

        <h3>密码设置</h3>
        <div>
          <input type="password" placeholder="请输入密码" v-model="pwd" :state="usepwd" />
          <span>密码不得为空</span>
        </div>
        <h3>确认密码</h3>
        <div>
          <input type="password" placeholder="请确认密码" v-model="repwd" :state="userrepwd" />
          <span>密码不得为空</span>
        </div>
        <h3>请输入手机号码</h3>
        <div>
          <input type="text" placeholder="请输入手机号码" v-model="phone" :state="userphone" />
          <span>手机号码不得为空</span>
        </div>
        <button @click="Newregister">欢迎注册</button>
        <div class="llast">
          <span>&bull;&nbsp;注册代表您同意</span>
          <span>《小鱼用户协议》</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // watch: {
  //   res.data.(newValue, oldValue) {

  //   }
  // },
  mounted() {
    this.Newregister();
  },
  data() {
    return {
      name: '',
      pwd: '',
      repwd: '',
      phone: '',
      username: '',
      usepwd: '',
      userrepwd: '',
      userphone: ''
    }
  },
  methods: {
    Newregister() {
      console.log('名字', this.name)
      console.log('密码', this.pwd)
      console.log('确认密码', this.repwd)
      console.log('手机号码', this.phone)
      let statecode
      this.axios.post('/user/register', `username=${this.name}&userpwd=${this.pwd}&userrepwd=${this.repwd}&userphone=${this.phone}`).then(res => {
        console.log(res)
        statecode = res.data.code
        console.log('状态码：', statecode)
        return statecode
      })
    },
    Dshow() {
      if (statecode == 201) {
        
      }
    }
    // goindex() {
    //   this.$router.push('/')
    // }
  },
};
</script>

<style lang="scss" scoped>
.register {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .xlogin {
    width: 700px;
    height: 690px;
    background-color: rgb(246, 203, 177);
    // margin: 0 auto;
    box-shadow: 10px 10px 10px 10px rgb(227, 199, 199);

    h1 {
      margin-top: 62px;
      color: black;
      font-size: 30px;
      font-weight: 600;
    }

    h4 {
      margin-top: 30px;
      font-size: 18px;
    }

    .input {
      margin: auto;
      margin-top: 43px;
      // background-color: red;
      width: 590px;
    }

    h3 {
      margin: 10px 0;
      font-size: 18px;
      font-weight: 500;
      text-align: left;
    }

    // input:focus {
    //   color: rgb(15, 15, 15);
    // }
    input:focus::placeholder {
      opacity: 0;
      transition: 0.2s;
    }

    input:not(.inp) {
      width: 350px;
      height: 50px;
      margin-left: -50px;
      // border-radius: 5px;
      border: none;
      border-bottom: 1px solid black;
      outline: none;
      padding: 0 25px;
      font-size: 18px;
    }

    .inp {
      width: 20px;
      height: 20px;
    }

    .status {
      display: flex;

      .inph {
        margin-top: 32px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        width: 590px;

        .left {
          position: relative;
        }

        .s {
          position: absolute;
          top: 4px;
          width: 120px;
          font-size: 18px;
        }
      }
    }

    .llast {
      font-size: 18px;
      margin-top: 30px;

      span:last-child {
        color: rgb(235, 15, 110);
        margin-top: 20px;
      }

      span:last-child:hover {
        color: deeppink;
      }
    }

    button {
      width: 250px;
      height: 60px;
      background-color: rgb(237, 105, 57);
      border: none;
      font-size: 18px;
      color: white;
      border-radius: 30px;
      margin-top: 30px;
    }

    button:hover {
      font-size: 20px;
      color: antiquewhite;
      background-color: crimson;
      transform: 0.3;
    }
  }
}
</style>